/*
 * @Author: 肖思汗 
 * @Date: 2025-07-10 11:00:32 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-15 18:00:07
 */

import { Button } from '@nutui/nutui-react-taro';
import { Input, RichText, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState } from 'react';
import CustomHeader from 'src/components/CustomHeader/CustomHeader';
import PageLayer from 'src/components/PageLayer/PageLayer';
import acceptInvitationStore from '../AcceptInvitation/acceptInvitationStore';
import styles from './withdrawal.module.less';
import withdrawalApi from './withdrawalApi';
import { ReactNode } from 'react';
import { observer } from "mobx-react-lite";
import myWalletStore from '../MyWallet/myWalletStore';

interface Iprops {
    children?: ReactNode
}

// 提现页面
const Withdrawal = observer((props: Iprops) => {

    // useEffect(() => {
    //     myWalletApi.getMoney().then((res) => {
    //         handleInputChange({
    //             cashOutMoney: res.data,
    //             maxCashOutMoney: res.data
    //         });
    //     });
    // }, []);

    const [formData, setFormData] = useState({
        cashOutMoney: '',
        zfbAccount: '',
        zfbPhone: '',
        maxCashOutMoney: ''
    });

    const handleInputChange = (data: { [key: string]: string }) => {
        setFormData(prev => ({
            ...prev,
            ...data
        }));
    };

    const handleSubmit = () => {
        // 表单校验
        if (!formData.cashOutMoney || Number(formData.cashOutMoney) <= 0) {
            Taro.showToast({
                title: '请输入有效提现金额',
                icon: 'none'
            });
            return;
        }

        if (Number(formData.cashOutMoney) > myWalletStore.money) {
            Taro.showToast({
                title: `提现金额不能超过${myWalletStore.money}`,
                icon: 'none'
            });
            return;
        }

        if (Number(formData.cashOutMoney) > acceptInvitationStore.eachDayIncomeMoney) {
            Taro.showToast({
                title: `提现金额不能超过${acceptInvitationStore.eachDayIncomeMoney}`,
                icon: 'none'
            });
            return;
        }

        if (Number(formData.cashOutMoney) < 50) {
            Taro.showToast({
                title: '提现金额最少50元',
                icon: 'none'
            });
            return;
        }

        if (!formData.zfbAccount) {
            Taro.showToast({
                title: '请输入ZFB名称',
                icon: 'none'
            });
            return;
        }

        if (!formData.zfbPhone || !/^1[3-9]\d{9}$/.test(formData.zfbPhone)) {
            Taro.showToast({
                title: '请输入正确的手机号',
                icon: 'none'
            });
            return;
        }

        // 提现
        withdrawalApi.withdrawal(formData).then((res) => {
            if (res.code === 200) {
                Taro.showToast({
                    title: res.msg,
                    icon: 'success',
                    duration: 2000
                });
                Taro.navigateBack();
            }
        });
    };

    return (
        <PageLayer
            title='提现'
            showBack
        >
            <View className={styles.card}>
                <View className={styles.formItem}>
                    <Text className={styles.label}>提现金额 每天上限:{acceptInvitationStore.eachDayIncomeMoney}元 最少50元 当前:{myWalletStore.money}元</Text>
                    <View className={styles.amountContainer}>
                        <Input
                            className={styles.input}
                            type='digit'
                            placeholder='请输入提现金额'
                            value={formData.cashOutMoney}
                            onInput={(e) => {
                                handleInputChange({
                                    cashOutMoney: e.detail.value,
                                });
                            }}
                        />
                    </View>
                </View>

                <View className={styles.formItem}>
                    <Text className={styles.label}>ZFB名称</Text>
                    <Input
                        className={styles.input}
                        placeholder='请输入ZFB名称'
                        value={formData.zfbAccount}
                        onInput={(e) => handleInputChange({ zfbAccount: e.detail.value })}
                    />
                </View>

                <View className={styles.formItem}>
                    <Text className={styles.label}>ZFB绑定手机</Text>
                    <Input
                        className={styles.input}
                        type='number'
                        placeholder='请输入ZFB绑定手机号'
                        value={formData.zfbPhone}
                        onInput={(e) => handleInputChange({ zfbPhone: e.detail.value })}
                    />
                </View>

                <Button
                    type='primary'
                    className={styles.submitBtn}
                    onClick={handleSubmit}
                >
                    提交提现申请
                </Button>
            </View>

            <View
                className={styles.card}
                style={{
                    height: `calc(100vh - 1180rpx)`,
                }}
            >
                <RichText
                    className="ql-editor"
                    nodes={acceptInvitationStore.cashOutRole.replace(/<img([^>]*)>/g, '<img style="max-width:100%;height:auto;" $1>')}
                />
            </View>

        </PageLayer>
    )
});

export default Withdrawal;